<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head >
    <meta charset="UTF-8">
    <title>沙盒及方法</title>
    <link rel="stylesheet" href="css/neo4jd3.min.css">
    <link rel="stylesheet" href="css/rightMenu.css">

    <script src="js/d3.js"></script>
    <script src="js/neo4jd3.js"></script>
    <script src="js/GraphInit.js"></script>
    <script src="js/GraphAppend.js"></script>
    <script src="./js/sandBox.js"></script>
    <script src="./js/rightMenu.js"></script>
    <script src="./js/jsonToNeo4jNode.js"></script>
</head>

<body style="height: 100%;" onload="onload()">
    <div style="height: 30%;font-size: 14px;overflow: scroll;">
        <div> 
            <span>第一步：查询PG(关系型数据库)中的数据</span>
            <button onclick="getAll3DTiles()">
                查询3DTiles
            </button>
        </div>
        <div>
            <span>第二步：创建Neo4j的对象</span>
            <select id="toCreateEnitityName">
                <option>3DTilesUsers</option>
            </select>
            <button onclick="createNeo4jEntities()">
                创建Neo4j的对象
            </button>
        </div>
        <div>
            <span>第三步：查Neo4j的所有</span>
            <select id="neo4jName">
                <option>3DTilesContent</option>
                <option>3DTilesUsers</option>
            </select>
            <button onclick="getItemsFromNeo4j()">
                查Neo4j内容
            </button>
        </div>
        <div>
            <span>第四步：创建Neo4j的关系</span>
            <select id="toCreateRelationName">
                <option>content2AddUserName</option>
            </select>
            <button onclick="setRelation()">
                创建关系
            </button>
        </div>
        <div>
            <span>第五步：查关系</span>
            <select id="subRelationName">
                <option>Content2BuildingId</option>
                <option>content2AddUserName</option>
                <option>AddUserName2Content</option>
            </select>
            <span>左过滤</span><input value="c3e30d41-d900-4605-9028-5ebe75aea2b7" id="filterOfLeft">
            <span>右过滤</span><input value="96277" id="filterOfRight">
            <button onclick="getSubRelation()">
                查关系
            </button>
        </div>
        <div id="result" style="font-size: 14px; overflow: scroll;">
        </div>
    </div>
   
    <div id="neo4jd3">

    </div>
</body>
<script>
    function onload(){
        bindContextMenu();
    }
</script>
<style>
    #neo4jd3 {
        flex-grow: 1;
        /* 自动填充剩余空间 */
        height: 65%;
        overflow-y: hidden;
    }

    .neo4jd3-graph {
        border-radius: 0;
        border-top: 0;
    }
</style>

</html>